<template>
  <div class="mall-class page" ref="webview">
    <div class="nav-bar">
      <van-nav-bar class="bg_white" title="商城" left-arrow fixed @click-left="$router.go(-1)"/>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="nodata" style="height:300px" v-if="dataList.length === 0">暂无数据</div>
        <van-list v-model="loading" :finished="finished" :finished-text="'没有更多了'" @load="onLoad" :offset="50" :immediate-check="false" v-if="dataList.length>0">
          <div class="rows-wp">
            <template v-for="(item,index) in dataList">
              <!-- <div class="rows-wp"></div> -->
              <div class="rows" :key="index">
                <div class="row-img">
                  <van-image :width="$tools.toPX(170)" :height="$tools.toPX(170)" fit="contain" lazy-load :src="item.goods_img">
                    <template v-slot:loading>
                      <van-loading type="spinner" size="24" />
                    </template>
                  </van-image>
                </div>
                <div class="info" @click="goGoods(item.id)">
                  <div class="name van-ellipsis" style="height: 50px;">{{item.goods_name}}</div>
                  <div class="price">￥{{item.min_price}}</div>
                  <div class="buyBtn">购买</div>
                </div>
              </div>
            </template>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <tab-bar v-model="isActive"></tab-bar>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'mallClass',
  data () {
    return {
      isActive: 3,
      apiUrl: 'goodslist',
      getTitle: sessionStorage.getItem('title')
    };
  },
  mixins: [mixins],
  components: {
  },
  methods: {
    goGoods (id) {
      this.$router.push({ 'path': '/mall/goods', query: { id: id } });
    }
  },
  created () {
    this.params = {
      cateArea: this.$route.query.area_id,
      cid: this.$route.query.cid,
      ocid: this.$route.query.ocid
    };
    this.getList('goodslist', true);
  }
};
</script>
<style lang="less" scoped>
.mall-class {
  display: flex;
  flex-direction: column;
  .content {
    border-top: 1px solid #eee;
    position: relative;
    flex: 1;
    background-color: #fff;
    overflow: auto;
    .rows {
      display: flex;
      padding: 30px 50px;
      border-bottom: 1px solid #f4f4f4; /*no*/
      .row-img {
        width: 170px;
        height: 170px;
        margin-right: 36px;
        img {
          width: 170px;
          height: 170px;
          object-fit: cover;
        }
      }
      .info {
        flex: 1;
        overflow: hidden;
        .van-ellipsis {
          overflow: hidden;
          text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
          display: -webkit-box;
          -webkit-line-clamp: 2; // 设置两行文字溢出
          -webkit-box-orient: vertical;
        }
        .price {
          color: #ff0034;
          font-size: 36px;
          padding: 10px 0;
          float: left;
          .text {
            font-size: 24px;
            vertical-align: middle;
          }
        }
        .name {
          font-size: 30px;
          padding: 15px 0 5px;
          color: #353535;
        }
        .buyBtn {
          float: right;
          border: 1px solid #ff0034;
          color: #ff0034;
          padding: 5px 10px;
          border-radius: 5px;
          margin: 11px 0;
        }
      }
    }
  }
}
</style>
